<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <linearGradient id="gradient1">
                <stop offset="0%" stop-color="white" stop-opacity="1"/>
                <stop offset="100%" stop-color="white" stop-opacity="0"/>
            </linearGradient>
            
            <linearGradient id="gradient2">
                <stop offset="0%" stop-color="black" stop-opacity="1"/>
                <stop offset="100%" stop-color="black" stop-opacity="0"/>
            </linearGradient>
            <mask id="mask1">
                <circle cx="40" cy="40" r="20" fill="url(#gradient2)"/>
            </mask>
        </defs>

        <rect x="20" y="20" width="60" height="40" fill="#fac" mask="url(#mask1)"/>
        <rect x="20" y="20" width="60" height="40" fill="none" stroke="#f00" stroke-width=".5" stroke-dasharray="2.5"/>
        <circle cx="40" cy="40" r="20" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <mask id="mask2" >
                <circle cx="40" cy="40" r="20" fill="white" transform="scale(0.5)" transform-origin="40 40"/>
            </mask>
        </defs>

        <rect x="20" y="20" width="60" height="40" fill="#fac" mask="url(#mask2)"/>
        <rect x="20" y="20" width="60" height="40" fill="none" stroke="#f00" stroke-width=".5" stroke-dasharray="2.5"/>
        <circle cx="40" cy="40" r="20" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <mask id="mask3" >
                <linearGradient id="gradient3">
                    <stop offset="0" stop-color="white" stop-opacity=".3" />
                    <stop offset="1" stop-color="white" stop-opacity=".8"/>
                </linearGradient>
                <linearGradient id="gradient4" href="#gradient3" x1="1" x2="0"></linearGradient>
                <rect x="0" y="0" width="50" height="100" fill="url(#gradient3)" />
                <rect x="50" y="0" width="50" height="100" fill="url(#gradient4)" />

            </mask>
        </defs>

        <image xlink:href="../imgs/3.png" height="100" width="100" preserveAspectRatio="xMidYMid slice"/>
        <image xlink:href="../imgs/4.png" height="100" width="100" mask="url(#mask3)"  preserveAspectRatio="xMidYMid slice" />
    </svg>

    
    <script src="index.js"></script>
</body>
</html>